<template>
  <div class="echarts-wall" :style="echartsStyle">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {ElMessage} from "element-plus";
// @ts-ignore
import screenConfig from '@/components/global/bigscreen/screen_config'

defineOptions({
  name: "EchartsSexPie"
});
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

const loading = ref<boolean>(false);

const props = defineProps({
      color: {
        type: Array, default: function () {
          return ['#00FFFF', "#C424FF", '#ffa800', '#ff5b00', '#ff3000']
        }
      },
      //显示legend
      legendShow: {type: Boolean, default: false},
      legendOrient: {type: String, default: 'vertical'},//vertical
      legendLeft: {type: String, default: 'left'},//vertical
      seriesRadius: {
        type: Object, default: function () {
          return [80, 85]
        }
      },
      sexWidth: {type: Number, default: 45},
      sexHeight: {type: Number, default: 70},
      imageWidth: {type: Number, default: 108},
      imageHeight: {type: Number, default: 108},

      url: {
        type: String, default: ''
      },
      params: {
        type: Object, default: {}
      }
    }
);
// dom 组件
const echartsDom = ref<any>(null);

const echartsStyle = ref<any>({});

// @ts-ignore
let {proxy} = getCurrentInstance()

//
let myEcharts: any = null;

onMounted(() => {
  initEcharts()
})

//监听查询条件
watch(() => props.params, () => {
  initEcharts();
})
const initEcharts = () => {
  getData().then((option: any) => {
    myEcharts = proxy.$echarts.init(echartsDom.value);
    if (myEcharts) {
      myEcharts.clear();
      myEcharts.setOption(option)
    }
  });
}

const legend = () => {
  return {
    show: props.legendShow,
    orient: props.legendOrient,
    left: props.legendLeft,
    textStyle: {
      fontSize: screenConfig.legendFontSize,
      fontFamily: screenConfig.legendFontFamily,
      color: screenConfig.legendFontColor,
    },
  }
}

const tooltip = () => {
  return {
    show: true,
    trigger: 'item', //axis , item
    backgroundColor: 'RGBA(0, 49, 85, 1)',
    borderColor: 'rgba(0, 151, 251, 1)',
    borderWidth: 1,
    borderRadius: 0,
    textStyle: {
      color: '#BCE9FC',
      fontSize: 16,
      align: 'left',
    },
  }
}
const getData = () => {
  return new Promise((resolve, reject) => {
        if (props.url) {
          proxy.$http.post(props.url, props.params)
              .then((apiResponse: any) => {
                    let img = '';
                    const man =
                        '';
                    const woman =
                        '';
                    if (apiResponse.success || apiResponse.data) {
                      //series
                      let series: any = [];
                      //获取的数据
                      let echartsData = apiResponse.data.echartsData;
                      let i = 0;
                      Object.keys(echartsData).forEach((key: string) => {
                        let data = [];
                        let sexData = echartsData[key];
                        for (let i = 0; i < sexData.length; i++) {
                          data.push({
                            value: sexData[i].value,
                            name: sexData[i].name,
                            itemStyle: {
                              normal: {
                                borderWidth: 5,
                                shadowBlur: 20,
                                borderColor: props.color[i],
                                shadowColor: props.color[i]
                              }
                            }
                          }, {
                            value: 2,
                            name: '',
                            itemStyle: {
                              normal: {
                                label: {
                                  show: false
                                },
                                labelLine: {
                                  show: false
                                },
                                color: 'rgba(0, 0, 0, 0)',
                                borderColor: 'rgba(0, 0, 0, 0)',
                                borderWidth: 0
                              }
                            }
                          });
                        }

                        let mSeries: any = {
                          name: '',
                          type: 'pie',
                          clockWise: false,
                          radius: props.seriesRadius,
                          hoverAnimation: false,
                          itemStyle: {
                            normal: {
                              label: {
                                show: true,
                                position: [0, -20],
                                color: '#ddd',
                                formatter: function (params: any) {
                                  let percent: any = 0;
                                  let total = 0;
                                  for (let i = 0; i < sexData.length; i++) {
                                    total += sexData[i].value;
                                  }
                                  percent = ((params.value / total) * 100).toFixed(0);
                                  if (params.name !== '') {
                                    return params.name + '：' + percent + '%';
                                  } else {
                                    return '';
                                  }
                                },
                              },
                              labelLine: {
                                length: 30,
                                length2: 50,
                                show: true,
                                color: '#00ffff'
                              }
                            }
                          },
                          data: data
                        };
                        series.push(mSeries);
                        i++;
                      });

                      let option: any = {
                        backgroundColor: 'transparent',
                        legend: legend(),
                        tooltip: tooltip(),
                        color: props.color,
                        graphic: {
                          elements: [{
                            type: "image",
                            z: 3,
                            style: {
                              image: img,
                              width: props.imageWidth,
                              height: props.imageHeight
                            },
                            left: 'center',
                            top: 'center',
                            position: [100, 100]
                          }, {
                            type: 'image',
                            z: 3,
                            style: {
                              image: woman,
                              width: props.sexWidth,
                              height: props.sexHeight
                            },
                            left: '50%',
                            top: 'center'
                          },
                            {
                              type: 'image',
                              z: 3,
                              style: {
                                image: man,
                                width: props.sexWidth,
                                height: props.sexHeight
                              },
                              right: '50%',
                              top: 'center'
                            }
                          ]
                        },
                        series
                      };
                      resolve(option);
                    } else {
                      ElMessage.error("数据格式异常,本组件接收数据类型")
                    }
                  }
                  ,
                  (err: any) => {
                    reject(err);
                  }
              )
        } else {
          reject("无法获取请求地址");
        }
      }
  )
}


</script>